<template>
  <div class="building-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-label">病人床位号：</div>
      <el-input v-model="params.bed_number" placeholder="请输入病人床位号" class="search-main" />
      <el-button type="primary" @click="getList">查询</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table :data="list" style="width: 100%">
        <!-- 表示多选 -->
        <!-- <el-table-column width="80" /> -->
        <el-table-column type="index" label="序号" />
        <!-- <el-table-column label="病人名字" prop="patientName" width="180" /> -->
        <el-table-column label="姓名" prop="patientName" />
        <el-table-column label="入院日期" :formatter="fn" />
        <el-table-column label="住院科室号" prop="departmentID" />
        <el-table-column label="床位号" prop="bed_number" />
        <el-table-column label="病人就诊号" prop="patientID" />
        <el-table-column label="结算状态" :formatter="fn2" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="mini" type="text" @click="add(scope.row.patientID)">添加医嘱</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="box">
        <el-pagination :current-page="params.page" :page-sizes="[2, 4, 6, 8, 10]" :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
    <el-dialog title='医生嘱咐' :visible="flag" :destroy-on-close="true" @close="handleClose">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="用药时间">
          <el-date-picker v-model="form.startDate" type="date" placeholder="开始日期">
          </el-date-picker>
          <el-date-picker v-model="form.endDate" type="date" placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="诊断疾病名称" prop="diagnosis">
          <el-input v-model="form.diagnosis"></el-input>
        </el-form-item>
        <el-form-item label="药品名称" prop="medicineName">
          <el-select v-model="form.medicineName" placeholder="请选择药品">
            <!-- 使用 el-option 标签循环渲染下拉框选项 -->
            <el-option v-for="medicine in medicineOptions" :key="medicine.medicineID" :label="medicine.medicineName"
              :value="medicine.medicineName" />
          </el-select>
        </el-form-item>
        <el-form-item label="数量" prop="quantity">
          <el-input v-model="form.quantity"></el-input>
        </el-form-item>
        <el-form-item label="医嘱状态" prop="status">
          <el-input v-model="form.status"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button>取消</el-button>
          <el-button @click="confirm1">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getAdmission, addMedicalOrder } from '@/api/doctorWay'
import { getMedicineListAPI } from '@/api/admin'

export default {
  bed_number: 'doctor',
  data() {
    return {
      flag: false,
      medicineOptions:[],
      total: 0,
      list: [],
      params: {
        page: 1,
        pageSize: 10,
        bed_number: ''
      },
      form: {
        orderID: '',
        startDate: '',
        endDate: '',
        patientID: '',
        diagnosis: '',
        medicineID: '',
        quantity: '',
        status: '',
        medicineName: ''
      },
      rules: {
        orderID: [
          { required: true, message: '必须填写', trigger: 'blur' }
        ],
        Time: [
          { required: true, message: '必须填写', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '必须填写', trigger: 'blur' }
        ],

        diagnosis: [
          { required: true, message: '必须填写', trigger: 'blur' }
        ],
        medicineName: [
          { required: true, message: '必须填写', trigger: 'blur' }
        ],
        quantity: [
          { required: true, message: '必须填写', trigger: 'blur' }
        ],
      }
    }
  },
  mounted() {
    //页面加载后请求数据
    this.getList()
    this.fetchMedicineOptions()

  },
  methods: {
    fetchMedicineOptions() {
        getMedicineListAPI({
          page: 1,
          pageSize: 100
        }).then((res) => {
          console.log("测试测试测试");
          console.log(res.data.rows);
          this.medicineOptions = res.data.rows
        })
      },
    fn(row) {
      let Time = row.admission_date
      return Time.split('-')[0] + '-' + Time.split('-')[1] + '-' + Time.split('-')[2].split('T')[0]
    },
    fn2(row) {
      return row.flag === 1 ? '已结算' : '未结算'
    },
    add(patientID) {
      console.log(patientID)
      this.flag = true
      this.form.patientID = patientID
    },
    //显示数据
    getList() {
      getAdmission(this.params).then((res) => {
        console.log(res)
        //展示在在页面
        this.list = res.data.rows
        this.total = res.data.total
      })
    },
    handleSizeChange(pageSize) {
      // 每页条数变化
      this.params.pageSize = pageSize
      this.params.page = 1
      this.getList()

    },
    handleCurrentChange(page) {
      // 页码变化
      this.params.page = page
      this.getList()

    },
    handleClose() {
      this.flag = false,
        this.form = {
          orderID: '',
          startDate: '',
          endDate: '',
          patientID: '',
          diagnosis: '',
          medicineName: '',
          quantity: '',
          status: ''
        }
    },
    confirm1() {

      addMedicalOrder(this.form).then(() => {
        // 提示
        this.$message.success('添加成功')
        this.flag = false
        this.getList()
        this.form = {
          orderID: '',
          startDate: '',
          endDate: '',
          patientID: '',
          diagnosis: '',
          medicineName: '',
          quantity: '',
          status: ''
        }
      }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.btn {
  margin: 20px;
}

.box {
  //浮动
  float: right;
  //flex弹性容器布局
  // display: flex;
  // //默认是从左往右       从右往左
  // justify-content: flex-end;

  margin-top: 10px;
  margin-right: 20px;
}

.department-container {
  padding: 10px;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  ;
  padding-bottom: 20px;

  .search-label {
    width: 100px;
  }

  .search-main {
    width: 220px;
    margin-right: 30px;
  }
}
</style>@/api/doctorWay